<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Address Events</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link type="text/css" href="styles.css" rel="stylesheet">
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery.address-1.5.min.js?strict=false&wrap=true"></script>
        <script type="text/javascript">

            // Simple log
            var log = function(msg) {
                if (!$('.log').size()) {
                    $('<div class="log" />').appendTo('.page');
                }
                $('.log').append(msg.replace(/^([^:]*):(.*)$/, '<p><b>$1:</b> <span class="$1">$2</span></p>'))
                    .attr({scrollTop: $('.log').attr('scrollHeight')})
                    .find('p:nth-child(even)').addClass('even');
            };
            
            // Event handlers
            $.address.init(function(event) {
                log('init: "' + event.value + '"');
                $('a').address(function() {
                    return $(this).attr('href').replace(location.pathname, '');
                });
            }).change(function(event) {
                log('change: "' + event.value + '"');
                var text = (event.value == '') ? 'Home' : 
                    event.pathNames[0].substr(0, 1).toUpperCase() + 
                    event.pathNames[0].substr(1);
                $('a').each(function() {
                    $(this).toggleClass('selected', $(this).text() == text);
                });
            }).internalChange(function(event) {
                log('internalChange: "' + event.value + '"');
            }).bind('externalChange', {msg: 'The value of the event is "{value}".'}, function(event) {
                log('externalChange: ' + event.data.msg.replace(/\{value\}/, event.value));
            });
            
        </script>
    </head>
    <body>
        <div class="page">
            <h1>jQuery Address Events</h1>
            <ul class="nav">
                <li>
                    <a href="/jquery/address/samples/events/">Home</a>
                </li>
                <li>
                    <a href="/jquery/address/samples/events/about">About</a>
                </li>
                <li>
                    <a href="/jquery/address/samples/events/portfolio">Portfolio</a>
                </li>
                <li>
                    <a href="/jquery/address/samples/events/contact">Contact</a>
                </li>
            </ul>
        </div>
    </body>
</html>